<template>
  <div id="modelDetail">
    <div v-if="isModelDetailReady()">
      <Repo v-for="repo of modelDetail.repos_info" v-bind:key="repo.name" :repo="repo" :modelName="modelDetail.name"/>
      <MakeType :modelName="modelDetail.name"></MakeType>
    </div>
    <div v-else>
      <el-skeleton :rows="12" animated/>
    </div>
  </div>
</template>

<script>
import Repo from '@/components/repo'
import MakeType from '@/components/makeType'

export default {
  name: "ModelDetail",
  props: ['model'],
  components: {
    Repo,
    MakeType
  },
  mounted() {
  },
  data: function () {
    return {
    }
  },
  methods: {
    getModelDetail: function () {
      let detailList = this.$store.state.model.modelDetailList
      for (let m of detailList) {
        if (m.name === this.model) {
          return m
        }
      }
      return null
    },
    isModelDetailReady: function () {
      return this.getModelDetail() !== null;
    },
  },
  computed: {
    modelDetail: function () {
      return this.getModelDetail()
    },
  }
}
</script>

<style scoped>
#setting {
  border: 1px var(--c4) dotted;
}

.hw-btn {
  margin-left: 80%;
}
</style>